<template>
	<!--
	问题：我们不知什么时能够拿到max值，但是总归有一刻，会拿到一个max值
		我们可以使用watch属性监听，监听父组件传递过来的max值，不管watch会被触发几次，但是最后一次，肯定是max值
	-->
	<div class="mui-numbox" data-numbox-min='1' :data-numbox-max='max'>
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" value="1" ref='showNum' @change='changeCount'/>
		<button class="mui-btn mui-btn-numbox-plus" type="button" >+</button>
		<!--
			分析：子组件什么时候把数据传递给父组件
			1.一开始是直接父组件传值给子组件，子组件监听父组件传递过来的值的改变去调用将数据传递给父组件的方法
			2.视频的做法是：直接监听numbox里面value的值  只要发生改变，就把值传给父组件
			
			
		-->
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.min.js'
	export default {
		props:['max'],
		mounted() {
			//初始化数字选择框组件
//			console.log(this.max)
			mui('.mui-numbox').numbox()
		},
		data() {
			return {
				
			}
		},
//		updated(){
//			console.log(11)
////			this.$emit('export-num',this.$refs.showNum.value)
//		},
		methods: {
			changeCount() {
				//每当文本框的值被修改时，立即将数据传递给父组件
//				console.log(this.$refs.showNum.value)
				this.$emit('export-num',parseInt(this.$refs.showNum.value))
			}
		},
		watch:{
			max(newVal,oldVal){
//				console.log(newVal)
				mui('.mui-numbox').numbox().setOption('max',newVal)
			}
		}
		
	}
</script>

<style lang='scss' scoped>
</style>